<template>
    <div><h2 style="margin-left: 1200px; ">欢迎你{{realName}}</h2>
        <el-button @click="button_click" size="mini" type="primary">跳转到bpmn流程页面</el-button>

        <el-button @click="baidu_click" size="mini" type="primary">跳转到百度地图页面</el-button>

        <a href="https://map.baidu.com/">超链接进入百度地图</a>

        <el-container style="height: 500px; border: 1px solid #eee;">
            <el-aside width="200px" style="background-color: #409EFF;">
                <el-scrollbar style="width: 100%">
                    <el-menu @select="groupSel">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>导航一</template>
                            <el-menu-item-group>
                                <template slot="title">分组一</template>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="1-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                            <el-menu-item-group>
                                <template slot="title">分组一</template>
                                <el-menu-item index="2-1">选项1</el-menu-item>
                                <el-menu-item index="2-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="2-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="2-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                            <el-menu-item-group>
                                <template slot="title">分组一</template>
                                <el-menu-item index="3-1">选项1</el-menu-item>
                                <el-menu-item index="3-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="3-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="3-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                    </el-menu>
                </el-scrollbar>
            </el-aside>

            <el-container style="width: 100%;height: 500px;">
                <el-scrollbar style="width: 100%;">
                    <el-header style="text-align: right; font-size: 12px">
                        <el-dropdown>
                            <i class="el-icon-setting" style="margin-left:  30px"></i>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>查看</el-dropdown-item>
                                <el-dropdown-item>新增</el-dropdown-item>
                                <el-dropdown-item>删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <span>{{realName}}</span>
                    </el-header>


                    <el-main>
                        <div v-show="showTable">
                            <el-table
                                    stripe
                                    border
                                    height="600"
                                    :data="tableData">
                                <el-table-column
                                        prop="userId"
                                        label="用户ID"
                                        width="50">
                                </el-table-column>
                                <el-table-column
                                        prop="coinName"
                                        label="币种名称"
                                        width="200">
                                </el-table-column>
                                <el-table-column
                                        prop="coinBalance"
                                        label="币种余额"
                                        width="200">
                                </el-table-column>
                                <el-table-column
                                        prop="coinAddress"
                                        label="币种地址"
                                        width="300">
                                </el-table-column>
                                <el-table-column
                                        prop="createTime"
                                        label="创建时间"
                                        width="300">
                                </el-table-column>

                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button
                                                size="mini"
                                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                        <el-button
                                                size="mini"
                                                type="danger"
                                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>

                            </el-table>

                            <div class="block">
                                <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="this.page.currentPage"
                                        :page-sizes="[20, 40, 60, 80]"
                                        :page-size=this.page.pageSize
                                        background
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total=this.page.total>
                                </el-pagination>
                            </div>
                        </div>
                    </el-main>

                </el-scrollbar>
            </el-container>
        </el-container>


    </div>


</template>

<script>
    import {getUserCoin} from '@/api/index'

    export default {
        name: 'HelloWorld',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App年轻即出发',
                realName: this.$route.query.realName,
                tableData: [],
                showTable: false,
                page: {
                    total: 0,   //总页数
                    currentPage: 1,  //当前页数
                    pageSize: 10    //每页显示条数
                },

            }
        },

        created() {
            console.log("created打印用户登录的真实姓名是:", this.realName);
            this.getList(this.page);
        },

        mounted() {
            //console.log("mounted打印用户登录的真实姓名是:",this.realName);
        },
        methods: {
            getList(page) {
                getUserCoin({
                    pageNum: page.currentPage,
                    pageSize: page.pageSize
                }).then(response => {
                    console.log("返回数据是:", response.data);
                    let responseData = response.data;
                    if (responseData.message == "OK") {
                        this.tableData = responseData.data.list;   //分页数据赋值
                        this.page.total = responseData.data.total;  //总条数赋值
                    } else {
                        console.log("请求数据出错.....");
                    }
                }).catch(failResponse => {
                    console.log("方法异常:" + failResponse);
                });
            },
            //每页显示条数改变回调
            handleSizeChange(val) {
                this.page.pageSize = val;
                this.getList(this.page);
            },

            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.getList(this.page);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            groupSel(index, indexPath) {
                this.showTable = index == '1-1' ? true : false;
                console.log("index is:", index, "indexPath:", indexPath);
            },
            button_click(){
                this.$router.push({
                    path: '/About'
                })
            },
            baidu_click(){
                this.$router.push({
                    path: '/baiduMap'
                })
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }

    .block {
        margin-left: 500px;
    }

    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }

</style>
